<template>
 <view class="bg-gradient-to-b from-[#f0f9f4] to-[#e6f4f1] flex items-center justify-center">
    <view class="w-[750rpx] bg-gradient-to-br from-[#2e7d32] to-[#388e3c] shadow-lg overflow-hidden relative">
      <!-- 卡片头部 -->
      <view class="flex items-center bg-gradient-to-r from-[#2e7d32] to-[#388e3c] p-[32rpx] border-b border-[#81c784]/30">
        <view class="flex-1 text-center">
          <text class="text-[36rpx] text-white font-bold mb-[8rpx] block drop-shadow-md">{{ nurseUser?.defaultHospitalName }}</text>
          <text class="text-[26rpx] text-[#e8f5e9] font-medium tracking-wide">{{ cardTitle }}</text>
        </view>
      </view>
      
      <!-- 卡片主体 -->
      <view class="flex p-[32rpx] bg-[#237b26]">
        <!-- 头像区域 -->
        <view class="flex-none flex flex-col items-center pr-[32rpx]">
          <image 
            :src="patientInfo.avatar || ren" 
            class="w-[150rpx] h-[150rpx] rounded-full object-cover shadow-lg mb-[20rpx] border-4 border-white/80"
            mode="aspectFill"
          />
        </view>
        
        <!-- 信息区域 -->
        <view class="flex-1">
          <view v-for="item in infoItems" :key="item.label" class="flex mb-[28rpx] items-center bg-white/10 p-[20rpx] rounded-[12rpx]">
            <view class="flex-1">
              <text class="text-[22rpx] text-[#b2dfdb] mb-[8rpx] block font-medium">{{ item.label }}</text>
              <text class="text-[30rpx] text-white font-semibold tracking-wide">{{ item.value }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useAuthStore } from '@/store';
import { storeToRefs } from 'pinia';
import ren from '@/assets/img/ren.png'
// 响应式数据
// const hospitalName = ref('仁心医疗中心')
const cardTitle = ref('电子诊疗卡')
const { nurseUser } = storeToRefs(useAuthStore());

const props = defineProps<{
  user: {
    name: string
    idcard: string
    phone: string
  }
}>()

const patientInfo = reactive({
  avatar: '',
  name: props.user.name,
  idCard: props.user.idcard,
  phone: props.user.phone
})

const infoItems = ref([
  { icon: '👤', label: '姓名', value: patientInfo.name },
  { icon: '🆔', label: '身份证号', value: patientInfo.idCard },
  { icon: '📱', label: '手机号码', value: patientInfo.phone }
])
</script>